import { TradeInfoType, TradeInfoTypeList, TradeType, TradeTypeList, UaTradeSearchDto } from "../../models/ua-trade.model";

// components/trade-filter/trade-filter.component.ts
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    ips: { type: Object, value: {} },
  },

  observers: {
    'ips': function () {
      const data: { label: string, value: number }[] = JSON.parse(JSON.stringify(this.data.ips)) as { label: string, value: number }[];
      this.setData({
        ipList: [{ label: "任意作品", value: -1 }, { label: "全部作品", value: 0 }, ...data]
      });
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    description: '',
    ipText: '全部作品',
    ipList: [{ label: "任意作品", value: -1 }, { label: "全部作品", value: 0 }],
    ipPanelVisible: false,
    ip: -1,
    tradeTypeText: '求购+出售',
    tradeTypeList: [{ label: "求购+出售", value: '' }, ...TradeTypeList],
    tradeTypePanelVisible: false,
    tradeType: '',
    tradeInfoTypeText: '任意商品',
    tradeInfoTypeList: [{ label: "任意商品", value: '' }, ...TradeInfoTypeList],
    tradeInfoTypePanelVisible: false,
    tradeInfoType: '',
  },

  /**
   * 组件的方法列表
   */
  methods: {
    searchClick() {
      this.setData({
        tradeTypePanelVisible: false,
        ipPanelVisible: false,
        tradeInfoTypePanelVisible: false
      });
      const data: UaTradeSearchDto = {
        ipId: this.data.ip !== -1 ? this.data.ip : undefined,
        tradeType: this.data.tradeType ? this.data.tradeType as TradeType : undefined,
        tradeInfoType: this.data.tradeInfoType ? this.data.tradeInfoType as TradeInfoType : undefined,
        description: this.data.description ? this.data.description : undefined,
      }
      this.triggerEvent('onsearch', JSON.parse(JSON.stringify(data)));
    },

    resetClick() {
      this.setData({
        ipText: '任意作品',
        ip: -1,
        description: '',
        tradeInfoType: '',
        tradeInfoTypeText: '任意商品',
        tradeType: '',
        tradeTypeText: '求购+出售',
      });
      this.triggerEvent('onreset', {});
    },

    descriptionChange(e: any) {
      this.setData({
        description: e.detail.value
      });
    },

    onIpPanelDisplay() {
      if (!this.data.ipPanelVisible) {
        this.setData({
          tradeTypePanelVisible: false,
          ipPanelVisible: true,
          tradeInfoTypePanelVisible: false
        });
      } else {
        this.setData({
          tradeTypePanelVisible: false,
          ipPanelVisible: false,
          tradeInfoTypePanelVisible: false
        });
      }
    },

    onIpPanelDisplayChange(e: any) {
      this.setData({
        ipPanelVisible: e.detail.visible,
      });
    },

    onIpPanelConfirm(e: any) {
      this.setData({
        ipText: e.currentTarget.dataset['label'],
        ip: e.currentTarget.dataset['value']
      });
    },

    onTradeTypePanelDisplay() {
      if (!this.data.tradeTypePanelVisible) {
        this.setData({
          tradeTypePanelVisible: true,
          ipPanelVisible: false,
          tradeInfoTypePanelVisible: false
        });
      } else {
        this.setData({
          tradeTypePanelVisible: false,
          ipPanelVisible: false,
          tradeInfoTypePanelVisible: false
        });
      }
    },

    onTradeTypeDisplayChange(e: any) {
      this.setData({
        tradeTypePanelVisible: e.detail.visible,
      });
    },

    onTradeTypePanelConfirm(e: any) {
      this.setData({
        tradeTypeText: e.currentTarget.dataset['label'],
        tradeType: e.currentTarget.dataset['value']
      });
    },

    // onTradeInfoTypePicker() {
    //   this.setData({
    //     tradeInfoTypeVisible: true
    //   });
    // },

    // onTradeInfoTypePickerCancel() {
    //   this.setData({
    //     tradeInfoTypeVisible: false
    //   });
    // },

    onTradeInfoTypePanelConfirm(e: any) {
      this.setData({
        tradeInfoTypeText: e.currentTarget.dataset['label'],
        tradeInfoType: e.currentTarget.dataset['value'],
      });
    },
  }
})